import React from "react";
import {Card as AntdCard, Form as AntdForm} from 'antd';
import {renderItems, VJsonComponent, VJsonComponentBase} from "../factory";
import _ from 'lodash'
import {TabsProps} from "antd/lib/tabs";
import {CardSize, CardTabListType, CardType} from "antd/lib/card";
import {toJS} from "mobx";
import {apply} from "..";

export interface CardVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean
    prefixCls?: string
    title?: React.ReactNode
    extra?: React.ReactNode
    bordered?: boolean
    headStyle?: React.CSSProperties
    bodyStyle?: React.CSSProperties
    style?: React.CSSProperties
    loading?: boolean
    hoverable?: boolean
    id?: string
    className?: string
    size?: CardSize
    type?: CardType
    cover?: React.ReactNode
    actions?: React.ReactNode[]
    tabList?: CardTabListType[]
    tabBarExtraContent?: React.ReactNode | null
    onTabChange?: (key: string) => void
    activeTabKey?: string
    defaultActiveTabKey?: string
    tabProps?: TabsProps

    items: any[]
}

export interface CardState {
    style?: React.CSSProperties
    headStyle?: React.CSSProperties
    bodyStyle?: React.CSSProperties
}

@VJsonComponent({
    view: 'card'
})
export default class Card extends VJsonComponentBase<CardVJsonProp, CardState> {
    static defaultProps = {
        visible: true,
        items: []
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Card.defaultProps
        )
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        return (
            // @ts-ignore
            <AntdCard key={this.key} view_id={this.key} aria-roledescription={this.view}
                prefixCls={apply(this, this.props.vjson.prefixCls)}
                title={apply(this, this.props.vjson.title)}
                extra={apply(this, this.props.vjson.extra)}
                bordered={apply(this, this.props.vjson.bordered)}
                style={apply(this, toJS(this.props.vjson.style))}
                headStyle={apply(this, toJS(this.props.vjson.headStyle))}
                bodyStyle={apply(this, toJS(this.props.vjson.bodyStyle))}
                loading={apply(this, this.props.vjson.loading)}
                hoverable={apply(this, this.props.vjson.hoverable)}
                className={apply(this, this.props.vjson.className)}
                size={apply(this, this.props.vjson.size)}
                type={apply(this, this.props.vjson.type)}
                cover={apply(this, this.props.vjson.cover)}
                actions={apply(this, this.props.vjson.actions)}
                tabList={apply(this, this.props.vjson.tabList)}
                tabBarExtraContent={apply(this, this.props.vjson.tabBarExtraContent)}
                onTabChange={this.props.vjson.onTabChange}
                activeTabKey={apply(this, this.props.vjson.activeTabKey)}
                defaultActiveTabKey={apply(this, this.props.vjson.defaultActiveTabKey)}
                tabProps={apply(this, this.props.vjson.tabProps)}
            >
                {
                    ...renderItems(this, this.props.vjson.items)
                }
            </AntdCard>
        )
    }
}
